import React, {Component} from 'react';
import {
  Dimensions,
  Image,
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  ActivityIndicator,
  ImageBackground,
  TextInput,
  FlatList,
} from 'react-native';
import {getPowerKing} from '../../api/index';
import {HeaderLeft, HeaderRight} from '../../components/index';
import {Market} from '../../images/index';
TextInput.defaultProps = Object.assign({}, TextInput.defaultProps, {
  defaultProps: false,
});
Text.defaultProps = Object.assign({}, Text.defaultProps, {
  allowFontScaling: false,
});
const {height, width} = Dimensions.get('window');

let ownCalculation = 887;
let interCalcuRanking = 171214;
let myCacluRanking = 171214;
let token = 'rd0zrs060j7v8wpqcqfknuw328tijyv9flwf0nbzl9ppdgwa8frcoy5xgmbzcl5l';

export default class CalculationPower extends Component {
  static navigationOptions = ({navigation}) => ({
    headerStyle: {
      backgroundColor: '#fff',
      borderBottomWidth: 0,
      height: 44,
      elevation: 0,
    },
    headerTitleStyle: {
      flex: 1,
      textAlign: 'center',
      color: '#333',
      fontSize: 17,
      fontWeight: '400',
    },
    headerLeft: <HeaderLeft triggerBack={() => navigation.goBack()} />,
    headerRight: (
      <TouchableOpacity
        style={{width: 16, height: 16, marginRight: 15}}
        onPress={() => navigation.navigate('CalculationHistory')}>
        <Image source={Market.history} style={{width: 16, height: 16}} />
      </TouchableOpacity>
    ),
    headerBackTitle: null,
  });
  constructor(props) {
    super();
    this.state = {
      ranking: 0,
      accountment: '',
      calcupower: 0,
      oneDay: 0,

      power_all: 0,
      my_power_count: 0,
      my_king: 0,
      //king_list:[],
    };
  }
  async getRanking() {
    // let token;
    // await getStorage('token').then(function(text) {
    //     token = text;
    // });
    // fetch('http://112.124.14.46:8080/mobile/power/getPowerKing.shtml', {
    //   method: 'post',
    //   headers: {
    //     imei: '1',
    //     version: '2',
    //     token: token,
    //   },
    // })
    //   .then(response => response.json())
    //   .then(responseJson => {
    //     this.setState({
    //       power_all: responseJson.data.power_all,
    //       my_power_count: responseJson.data.my_power_count,
    //       my_king: responseJson.data.my_king,
    //       //king_list:responseJson.king_list.data,
    //     });
    //   });

    const result = await getPowerKing();
    this.setState({...result.data});
  }
  async componentDidMount() {
    await this.getRanking();
  }
  render() {
    return (
      <ScrollView>
        <View
          style={{
            backgroundColor: '#F3F7FA',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <View style={styles.boderStyle}>
            <Text
              style={{
                color: '#FFFFFF',
                fontSize: 25,
                justifyContent: 'center',
                textAlign: 'center',
                //fontFamily: 'MicrosoftYaHei-Bold',
                fontWeight: 'bold',
              }}>
              {this.state.my_power_count}
            </Text>
            <Text
              style={{
                marginTop: (3.5 / 667) * height,
                color: '#ABC7FF',
                fontSize: 12,
                justifyContent: 'center',
                textAlign: 'center',
                //fontFamily: 'MicrosoftYaHei-Bold',
              }}>
              个人算力
            </Text>
            <View>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <View
                  style={{
                    height: (0.5 / 667) * height,
                    borderWidth: (0.5 / 667) * height,
                    borderColor: '#3C8AF6',
                    marginTop: (10 / 667) * height,
                    width: (109 / 375) * width,
                  }}
                />
                <Text
                  style={{
                    width: (70 / 667) * height,
                    marginTop: (9 / 667) * height,
                    textAlign: 'center',
                    color: '#FFFFFF',
                    fontSize: 14,
                    //fontFamily: 'MicrosoftYaHei-Bold',
                  }}>
                  算力记录
                </Text>
                <View
                  style={{
                    height: (0.5 / 667) * height,
                    borderWidth: (0.5 / 667) * height,
                    borderColor: '#3C8AF6',
                    marginTop: (10 / 667) * height,
                    width: (109 / 375) * width,
                  }}
                />
              </View>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <View
                style={{
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'center',
                  width: (338 / 375 / 2) * width,
                }}>
                <Text
                  style={{
                    marginTop: (15 / 667) * height,
                    textAlign: 'center',
                    color: '#FFFFFF',
                    fontSize: 15,
                    //fontFamily: 'MicrosoftYaHei-Bold',
                  }}>
                  {this.state.power_all}
                </Text>
                <Text
                  style={{
                    marginTop: (4.5 / 667) * height,
                    textAlign: 'center',
                    color: '#ABC7FF',
                    fontSize: 11,
                    //fontFamily: 'MicrosoftYaHei-Bold',
                  }}>
                  全网算力
                </Text>
              </View>
              <View
                style={{
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'center',
                  width: (338 / 375 / 2) * width,
                }}>
                <Text
                  style={{
                    marginTop: (15 / 667) * height,
                    textAlign: 'center',
                    color: '#FFFFFF',
                    fontSize: 15,
                    //fontFamily: 'MicrosoftYaHei-Bold',
                  }}>
                  {this.state.my_king.index}
                </Text>
                <Text
                  style={{
                    marginTop: (4.5 / 667) * height,
                    textAlign: 'center',
                    color: '#ABC7FF',
                    fontSize: 11,
                    //fontFamily: 'MicrosoftYaHei-Bold',
                  }}>
                  我的算力排名
                </Text>
              </View>
            </View>
          </View>
          <View style={styles.rankingStyle}>
            <View
              style={{
                marginTop: 0,
                width: (338 / 375) * width,
                flexDirection: 'row',
              }}>
              <Text
                style={{
                  marginLeft: (10.5 / 375) * width,
                  marginTop: (10 / 667) * height,
                  textAlign: 'center',
                  color: '#333333',
                  fontSize: 15,
                  //fontFamily: 'MicrosoftYaHei-Bold',
                  fontWeight: 'bold',
                }}>
                挖矿算力排名
              </Text>
              <Text
                style={{
                  marginTop: (16 / 667) * height,
                  marginLeft: (13 / 375) * width,
                  textAlign: 'center',
                  color: '#ABC7FF',
                  fontSize: 11,
                  //fontFamily: 'MicrosoftYaHei-Bold',
                }}>
                算力越多，每日获得碱基越多~
              </Text>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <View
                style={{
                  width: (60 / 375) * width,
                  height: (48 / 667) * height,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    textAlign: 'center',
                    color: '#333333',
                    fontSize: 13,
                    //fontFamily: 'MicrosoftYaHei-Bold',
                  }}>
                  名次
                </Text>
              </View>
              <View
                style={{
                  width: (120 / 375) * width,
                  height: (48 / 667) * height,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    textAlign: 'center',
                    color: '#333333',
                    fontSize: 13,
                    //fontFamily: 'MicrosoftYaHei-Bold',
                  }}>
                  账户
                </Text>
              </View>
              <View
                style={{
                  width: (70 / 375) * width,
                  height: (48 / 667) * height,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    textAlign: 'center',
                    color: '#333333',
                    fontSize: 13,
                    //fontFamily: 'MicrosoftYaHei-Bold',
                  }}>
                  算力
                </Text>
              </View>
              <View
                style={{
                  width: (75 / 375) * width,
                  height: (48 / 667) * height,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    textAlign: 'center',
                    color: '#333333',
                    fontSize: 13,
                    //fontFamily: 'MicrosoftYaHei-Bold',
                  }}>
                  24h收益
                </Text>
              </View>
            </View>
            <Ranking />
            <View style={{height: (5 / 667) * height}} />
          </View>
          <View
            style={{
              height: (145.5 / 667) * height,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <View
              style={{
                height: (32.5 / 667) * height,
                width: (338 / 375) * width,
                backgroundColor: '#2AA0F2',
                marginTop: (50.5 / 667) * height,
                borderRadius: 5,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Text
                style={{
                  textAlign: 'center',
                  color: '#FFFFFF',
                  fontSize: 14,
                  //fontFamily: 'MicrosoftYaHei-Bold',
                }}>
                立即去增加算力
              </Text>
            </View>
          </View>
        </View>
      </ScrollView>
    );
  }
}
class Ranking extends Component {
  constructor(props) {
    super();
    this.state = {
      king_list: [],
    };
  }
  async getCalRanking() {
    // let token;
    // await getStorage('token').then(function(text) {
    //     token = text;
    // });
    fetch('http://112.124.14.46:8080/mobile/power/getPowerKing.shtml', {
      method: 'post',
      headers: {
        imei: '1',
        version: '2',
        token: token,
      },
    })
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          king_list: responseJson.data.king_list,
        });
      });
  }
  async componentDidMount() {
    await this.getCalRanking();
  }
  render() {
    const results = {
      data: [
        {ranking: 1, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 2, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 3, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 4, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 5, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 6, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 7, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 8, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 9, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 10, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 11, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 12, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 13, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 14, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 15, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 16, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 17, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 18, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 19, accountment: '1861****260', calcupower: 520, oneDay: 520},
        {ranking: 20, accountment: '1861****260', calcupower: 520, oneDay: 520},
      ],
      error_code: 0,
    };
    return (
      <FlatList
        data={this.state.king_list}
        renderItem={({item}) => (
          <View>
            <View style={{justifyContent: 'center', alignItems: 'center'}}>
              <View
                style={{
                  height: (0.5 / 667) * height,
                  width: (300 / 375) * width,
                  borderWidth: (0.5 / 667) * height,
                  borderColor: '#E5E5E5',
                  justifyContent: 'center',
                }}
              />
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <View
                style={{
                  width: (60 / 375) * width,
                  height: (40 / 667) * height,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    textAlign: 'center',
                    color: '#333333',
                    fontSize: 13,
                    //fontFamily: 'MicrosoftYaHei-Bold',
                  }}>
                  {item.index}
                </Text>
              </View>
              <View
                style={{
                  width: (120 / 375) * width,
                  height: (40 / 667) * height,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    textAlign: 'center',
                    color: '#333333',
                    fontSize: 13,
                    //fontFamily: 'MicrosoftYaHei-Bold',
                  }}>
                  {item.nickname}
                </Text>
              </View>
              <View
                style={{
                  width: (70 / 375) * width,
                  height: (40 / 667) * height,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    textAlign: 'center',
                    color: '#333333',
                    fontSize: 13,
                    //fontFamily: 'MicrosoftYaHei-Bold',
                  }}>
                  {item.power}
                </Text>
              </View>
              <View
                style={{
                  width: (75 / 375) * width,
                  height: (40 / 667) * height,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    textAlign: 'center',
                    color: '#333333',
                    fontSize: 13,
                    //fontFamily: 'MicrosoftYaHei-Bold',
                  }}>
                  {item.token}
                </Text>
              </View>
            </View>
          </View>
        )}
      />
    );
  }
}
let styles = StyleSheet.create({
  boderStyle: {
    marginTop: (21 / 667) * height,
    height: (168.5 / 667) * height,
    width: (338 / 375) * width,
    backgroundColor: '#256AF5',
    borderRadius: 6,
    justifyContent: 'center',
    alignItems: 'center',
  },
  rankingStyle: {
    marginTop: (21.5 / 667) * height,
    width: (338 / 375) * width,
    backgroundColor: '#FFFFFF',
    borderRadius: 6,
  },
});
